<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
<!--        <a-card>-->
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="所属分类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productId">
                <j-tree-select
                  v-model="model.productId"
                  placeholder="请选择分类"
                  dict="sys_category,name,id"
                  pidField="pid"
                  pidValue="0"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
                <a-input v-model="model.name" placeholder="请输入名称"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="功率" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="power">
                <a-input v-model="model.power" placeholder="请输入功率"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="速比" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="speedRatio">
                <a-input v-model="model.speedRatio" placeholder="请输入速比"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="最大输出转矩" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maxOutputTorque">
                <a-input v-model="model.maxOutputTorque" placeholder="请输入最大输出转矩"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="技术支持" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="explainId">
                <j-popup
                         :multi="false"
                         v-model="model.explainId"
                         code="explain_select"
                         orgFields="title,id"
                         destFields="explainTitle,explainId"
                         field="explainId"
                         placeholder="请选择技术支持"
                         @input="popupCallback"
                ></j-popup>

              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="轮播图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="imgUrls" extra="图片尺寸为：430*430">
                <j-image-upload isMultiple  v-model="model.imgUrls" ></j-image-upload>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="简介" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="introduce">
<!--                <j-editor v-model="model.introduce" plugins="" toolbar="fontsizeselect"/>-->
                <a-textarea
                  v-model="model.introduce"
                  placeholder="请输入产品简介"
                  :auto-size="{ minRows: 3, maxRows: 5 }"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="是否推荐" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isCommand">
                <j-dict-select-tag type="radioButton" v-model="model.isCommand" dictCode="yn" placeholder="请选择是否推荐" @change="tuijianChange"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" v-if="isTuijian">
              <a-form-model-item label="推荐图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="imgUrls" extra="图片尺寸为：353*279">
                <j-image-upload :isMultiple="false"  v-model="model.commandUrl" ></j-image-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
<!--        </a-card>-->

<!--        <a-card>
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="title">
                <a-input v-model="model.title" placeholder="请输入标题"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="副标题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="subTitle">
                <a-input v-model="model.subTitle" placeholder="请输入副标题"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="缩略图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="logo">
                <a-input v-model="model.logo" placeholder="请输入缩略图"  ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="附件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="appendix">
                <j-upload v-model="model.explainAppendix" placeholder="请上传附件"  ></j-upload>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-card>-->

      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import JTreeSelect from '@/components/jeecg/JTreeSelect'
  export default {
    name: 'ProductDetailForm',
    components: {
      JTreeSelect
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        isTuijian:false,
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          productId:[{ required: true, message: '请选择分类!'},],
          name:[{ required: true, message: '请填写产品名称!'},],
          power:[{ required: true, message: '请输入功率!'},],
          speedRatio:[{ required: true, message: '请填写产品速比!'},],
          maxOutputTorque:[{ required: true, message: '请填写产品最大输出转矩!'},],
          explainId:[{ required: true, message: '请选择对应技术支持!'},],
          imgUrls:[{ required: true, message: '请上传产品轮播图!'},],
          introduce:[{ required: true, message: '请填写产品简介!'},],
          commandUrl:[{ required: true, message: '请上传产品推荐图!'},],
        },
        url: {
          add: "/detail/productDetail/add",
          edit: "/detail/productDetail/edit",
          queryById: "/detail/productDetail/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.modelDefault.isCommand = 0
    },
    methods: {
      popupCallback(r,old){
        console.log(r)
        console.log(old)
        console.log(this.model.explainId)
        // this.model = Object.assign(this.model, old);
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        if(this.model.isCommand==1){
          this.isTuijian = true
        }else {
          this.isTuijian = false
        }
        this.visible = true;
      },
      tuijianChange(e){
        console.log(e)
        if (e==1){
          this.isTuijian = true
        }else {
          this.isTuijian = false
        }
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            console.log(this.model)
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }

        })
      },
    }
  }
</script>